import React, {Component} from "react";
import PropTypes from "prop-types";
import {View} from "react-native";
import {Button, Flex, InputItem, List, Modal} from "antd-mobile";
import moment from "moment";
import "moment/locale/zh-cn";

const Item = List.Item
const Brief = Item.Brief
const zhNow = moment().locale('zh-cn').utcOffset(8)

const scancodeImg = require('../../img/Normal/scancode.png')
const handenterImg = require('../../img/Normal/handenter.png')
const cameraImg = require('../../img/Normal/camera.png')
const batchImg = require('../../img/Normal/batch.png')

const alert = Modal.alert

export default class HandEnterPopUp extends Component {
  static propTypes = {
    onSave: PropTypes.func
  }

  constructor(props) {
    super(props)
    this.state = {
      handVal: '',
      handValErr: true,
    }
  }

  onSave = (e) => {
    if(this.state.handValErr) {
      return false
    }
    this.props.onSave(this.state.handVal)
    this.props.onClose()
  }

  onClose = (e) => {
    this.props.onClose()
  }

  changeHandVal = (v) => {
    if(v.trim().length != 20) {
      this.setState({
        handValErr: true
      })
    } else {
      this.setState({
        handValErr: false
      })
    }
    this.setState({handVal: v})
  }

  render(){
    return (
      <View>
        <List renderHeader={() => "手工输入"}>
          <InputItem
            placeholder="条形码号为20位"
            value={this.state.handVal}
            onChange={this.changeHandVal}
            error={this.state.handValErr}
          >
            条形码号
          </InputItem>
          <Flex>
            <Flex.Item>
              <View style={{margin: 10}}>
                <Button onClick={this.onSave}>保存</Button>
              </View>
            </Flex.Item>
            <Flex.Item>
              <View style={{margin: 10}}>
                <Button onClick={this.onClose}>关闭</Button>
              </View>
            </Flex.Item>
          </Flex>
        </List>
      </View>
    )
  }
}
